来自：https://www.runoob.com/jquery/jquery-tutorial.html


<!-- 引用jquery  -->
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>


<!--  一般写法，等待窗口完全执行完毕再执行的。   -->
<script>
$(document).ready(function(){
   // 开始写 jQuery 代码...
});

//与上一写法一致
$(function(){
 
   // 开始写 jQuery 代码...
 
});


//对比JavaScript 入口函数:
window.onload = function () {
    // 执行代码
}

//jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
//  jQuery 元素选择器基于元素名选取元素。  在页面中选取所有 <p> 元素: $("p")

//用户点击按钮后，所有 <p> 元素都隐藏： 
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

//当用户点击按钮后，有 id="test" 属性的元素将被隐藏：
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

//jQuery 类选择器可以通过指定的 class 查找元素。
$(".test")


//当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：
$("p").click(function(){
  $(this).hide();
});


//通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
  $("p").toggle();
});


//Jquery的动画效果真心好玩 哈哈哈哈
//您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});


//Jquery链式写法
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
or
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);


//Jquery更改text和对应的内容
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});


//校验输入正确性
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script>
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
    }
});
$().ready(function() {
    $("#commentForm").validate();
});
</script>

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>输入您的名字，邮箱，URL，备注。</legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (必需)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (可选)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">备注 (必需)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>


















</script>